<template>
    <!-- 歌曲列表 -->
    <div class="SongList">
        <ul>
            <li>
                <span class="liSpanFst"></span>
                <span class="title">音乐标题</span>
                <span class="singer">歌手</span>
                <span class="album">专辑</span>
                <span class="time">时长</span>
            </li>
            <li 
            :infinite-scroll-distance="400" 
            v-infinite-scroll="load" 
            @dblclick="liDblclick(item)" 
            :class="mouseFlag==item.id? 'liActive':''" 
            @mouseenter="mouseenter(item)"
            @mouseleave="mouseleave()" 
            v-for="(item,index) in songList" 
            :key="index">
                <span  class="liSpanFst">
                    <span>{{index<9? '0'+(index+1):index+1}}</span>
                    <i class="iconfont big-xihuan"></i>
                    <i class="iconfont big-xiazai"></i>
                </span>
                <span class="title">{{item.name}}</span>
                <span class="singer">{{item.gs.join('/')}}</span>
                <span class="album">{{item.al.name}}</span>
                <span class="time">{{$moment(item.dt).format("mm:ss")}}</span>
            </li>
        </ul>
    </div>
</template>

<script>
export default {
    props:['songListChild'],
    data(){
        return{
            mouseFlag:"",
            songList:[],
            songListLoad:[],
        }
    },
    mounted(){
        this.songList = this.songListChild;
        this.songList.map(item => {
            item.gs= [];
            item.ar.forEach(i => {
                item.gs.push(i.name)
            });
        });
        window.addEventListener('scroll',this.scroll,true)
    },
    methods:{
        load(){
        },
        scroll(e){
            console.log(e);

        },
        // 懒加载
        lazyLoading(index){
            let arr = this.songList.slice(20);
            this.songListLoad.push()
        },
        // 鼠标移入
        mouseenter(item){
            this.mouseFlag = item.id;
        },
        // 鼠标移出
        mouseleave(){
            this.mouseFlag = ""
        },
        // li鼠标双击
        liDblclick(item){
            this.$store.dispatch('setSongId',item)
            this.$store.dispatch('setSheetList',this.songList)
        },
    }
}
</script>

<style lang="scss" scoped>
@import "./SongList.scss";
</style>